<template>
  <a-form-item :name="props.formNamePath" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
    <div class="radio-box">
      <a-radio-group :disabled="formItem.disabled" v-model:value="formItem.value">
        <template v-for="(options, index_options) in formItem.options" :key="index_options">
          <a-radio :value="options.value" :label="options.label">
            {{ options.label ? options.label : options }}
          </a-radio>
        </template>
      </a-radio-group>
    </div>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue";
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
  formNamePath: []
})

const formItem: any = ref(props.formItem as any);

useColumnItem(computed(() => props.formItem), formItem);
</script>

<style lang="less" scoped>
::v-deep(.ant-radio-group) {
  display: flex;
}

.radio-box {
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}
</style>